import React, { Component } from 'react'
import { Input, Divider, List } from 'antd';
import Clock from '../Clock/Clock'
import './TodoList.css'

const { Search } = Input;
// todolist 组件
class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            val: ''
        }
    }
    handleClick(value, event) {
        this.setState({
            list: [...this.state.list, value],
            val: ""
        })
    }
    handleChange(e) {
        this.setState({
            val: e.target.value
        })
    }
    render() {
        return (
            <div className="app">
                <Divider orientation="left">今天要做的事</Divider>
                <Search
                    placeholder="输入待办事项，回车"
                    value={this.state.val}
                    onSearch={this.handleClick.bind(this)}
                    onChange={this.handleChange.bind(this)}
                    enterButton="添加">
                </Search>
                <div style={{ height: '10px' }}></div>
                <List
                    header={<div>待办事项：</div>}
                    footer={<Clock />}
                    bordered
                    itemLayout={'vertical'}
                    dataSource={this.state.list}
                    renderItem={item => (
                        <List.Item className="item">{item}</List.Item>
                    )}
                />
            </div>
        )
    }
}
export default TodoList